<template>
	<el-row id="container">
		<Header></Header>
		<el-col :span="24" id="outter_container">
			<el-col :span="14" :offset="5" id="content_container">
				<ContentContainer1></ContentContainer1>
				<ContentContainer2></ContentContainer2>
				<ContentContainer3></ContentContainer3>
			</el-col>
		</el-col>
		<Footer></Footer>

		<!-- <MEHeader class="hidden-md-and-up"></MEHeader>
		<el-col :span="24" id="MEoutter_container" class="hidden-md-and-up">
			<MEContentContainer1></MEContentContainer1>
			<MEContentContainer2></MEContentContainer2>
			<MEContentContainer3></MEContentContainer3>
		</el-col>
		<MEFooter class="hidden-md-and-up"></MEFooter> -->
	</el-row>
</template>

<script>

	//导入主页需要使用的组件
	import Header from '../components/header.vue'
	import Footer from '../components/footer.vue'
	import ContentContainer1 from '../components/contentcontainer1.vue'
	import ContentContainer2 from '../components/contentcontainer2.vue'
	import ContentContainer3 from '../components/contentcontainer3.vue'

	export default {

		//声明当前页面所需要使用的组件
		components: { 
			Header, 
			Footer, 
			ContentContainer1, 
			ContentContainer2, 
			ContentContainer3,
		},

		data () {
			return {
				// list: []
				// refreshflag: true
			}
		},

		created () {
			// localStorage.clear();
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	#container {
		position: absolute;
		margin-top: 0px;
		margin-bottom: 0px;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		box-sizing: border-box;
	}

	#outter_container {
		/*height: 84%;*/
		/*height: 91.8%;*/
		margin-top: 4.5px;
		height: 100%;
		/*width: 1200px;*/
		/*height: 870px;*/
	}

	#content_container {
		height: 100%;
		background-color: rgb(248, 248, 248);
		padding: 20px;
		padding-top: 10px;
	}
	
</style>